<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	    	<% 
String path = request.getContextPath(); 
// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）: 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE html>
<html>
<head>
<base href=" <%=basePath%>"> 
<!-- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> -->
<meta name="description" content="书籍类别管理">
<meta name="author" content="xwj">
<title>书籍类别管理</title>
<link href="bootstrap/bootstrap.css" rel="stylesheet">

<link href="css/admin_css/assets/font-awesome/css/font-awesome.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/css/zabuto_calendar.css">
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/js/gritter/css/jquery.gritter.css" />
<link rel="stylesheet" type="text/css"
	href="css/admin_css/assets/lineicons/style.css">

<link href="css/admin_css/assets/css/style.css" rel="stylesheet">
<link href="css/admin_css/assets/css/style-responsive.css"
	rel="stylesheet">
<script src="jquery/jquery-2.2.4.min.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>

<script class="include" type="text/javascript"
	src="css/admin_css/assets/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="css/admin_css/assets/js/jquery.scrollTo.min.js"></script>
<script src="css/admin_css/assets/js/common-scripts.js"></script>


<!-- 表单验证 -->
<script
	src="bootstrap/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<!-- 分页工具 -->
<script type="text/javascript" src="jsutil/pagetool.js"></script>

<script>
	var pageNum = 1;
	//获得总页数
	var totalPage=0;
	$(function() {
		getCateory(pageNum);
		// $('select.styled').customSelect();
		//类别添加表单验证
		$("#add_form").bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {/*输入框不同状态，显示图片的样式*/
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {/*验证*/
				cname : {/*键名username和input name值对应*/
					message : 'The cname is not valid',
					validators : {
						notEmpty : {/*非空提示*/
							message : '类别不能为空'
						},
						stringLength : {/*长度提示*/
							min : 2,
							max : 16,
							message : '类别名的长度必须在2到16之间'
						},/*最后一个没有逗号*/
						remote : { //查询是否有相同的用户名
							url : "categoryMsg/yanzheng.do",
							type : "post",
							data : {
								"cname" : $('input#add_cname').val()
							},
							delay : 1000, //ls后执行ajax
							dataType : "json",
							message : "该类别已存在"//提示信息
						}

					}
				},
				cdesc : {
					message : 'The cdesc is not valid',
					validators : {
						stringLength : {/*长度提示*/
							max : 64,
							message : '类别描述的长度必须小于64'
						}
					}
				}
			}
		});
		//修改表单验证
		$("#up_form").bootstrapValidator({
			message : 'This value is not valid',
			feedbackIcons : {/*输入框不同状态，显示图片的样式*/
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {/*验证*/
				cname : {/*键名username和input name值对应*/
					message : 'The cname is not valid',
					validators : {
						notEmpty : {/*非空提示*/
							message : '类别不能为空'
						},
						stringLength : {/*长度提示*/
							min : 2,
							max : 16,
							message : '类别名的长度必须在2到16之间'
						}
					/*最后一个没有逗号*/
					}
				},
				cdesc : {
					message : 'The cdesc is not valid',
					validators : {
						stringLength : {/*长度提示*/

							max : 64,
							message : '类别描述的长度必须小于64'
						}
					}
				}
			}
		});
	});

	//分页查询
	function getCateory(pageNum) {
		var cname = $("input[name='q_cname']").val();
		$.ajax({
					url : "categoryMsg/getStuList.do", // 请求地址
					type : "POST", // 请求类型
					async : "true", // 是否异步方式
					data : {
						 // 传递参数，服务端可通过request.getParameter()获取
						"num" : pageNum,
						"cname" : cname
					},
					dataType : "json", // 返回数据格式
					success : function(data) {
						var tbodys = $("tbody").empty();
						if (data.res == 1) {
							totalPage=data.totalPage;
							$.each(data.list,function(index, element) {
								
												var desc = element.cdesc;
												//判断类别描述是否为空
												if (desc == "" || desc == null
														|| desc == undefined) {
													desc = "无";
												}
												//alert(index+"--是-"+element.cname);
												var tr = "<tr><td>"
														+ (index + 1)
														+ "<input type='hidden' value='"+element.cid+"'></td>"
														+ "<td>"
														+ element.cname
														+ "</td>"
														+ "<td class='hidden-phone'>"
														+ desc
														+ "</td><td>"
														+ "<button  onclick='editInfo(this)' class='btn btn-primary btn-xs'>"
														+ "<i class='fa fa-pencil'></i></button>"
													
														+ "</td></tr>";
												tbodys.append(tr);
											});
							setPage(pageNum, data.totalPage, "getCateory");
						}

					}
				});

	}
	//打开添加模态框
	function dakai() {
		$('#addModal').modal('show');
	}
	//添加类别信息
	function add() {
		// 提交前先主动验证表单 
		var bv = $("#add_form").data('bootstrapValidator');
		bv.validate();
		if (!bv.isValid()) {
			//alert(not());
			return;
		}
		if (!confirm("确认要添加吗?")) {
			return;
		}
		$.ajax({
			url : 'categoryMsg/add.do',
			type : 'POST',
			async : "true",
			data : $('#add_form').serialize(),
			dataType : 'json',
			success : function(data) {
				if (data.res == 1) {
					alert("添加成功");
					getCateory(totalPage);
					//关闭模态框
					$('#addModal').modal('hide');
					$('#add_form')[0].reset();
				} else {
					alert("添加失败！");
					getCateory(1);
				}
			}
		});
	}
	//修改类型信息
	function update() {
		var bv = $("#up_form").data('bootstrapValidator');
		bv.validate();
		if (!bv.isValid()) {
			//alert(not());
			return;
		}
		if (!confirm("确认要修改吗?")) {
			return;
		}
		$.ajax({
			url : 'categoryMsg/update.do',
			type : 'POST',
			async : "true",
			data : $('#up_form').serialize(),
			dataType : 'json',
			success : function(data) {
				if (data.res == 1) {
					alert("修改成功");
					getCateory(1);
				}
			}
		});
	}
	//向编辑模态框传递信息
	function editInfo(obj) {
		var tds = $(obj).parent().parent().find('td');
		var cid = tds.eq(0).find('input').eq(0);
		$('#up_cid').val(cid.val());
		$('#up_cname').val(tds.eq(1).text());
		//类别描述
		var updesc = tds.eq(2).text();
		if (updesc == '无') {
			updesc = '';
		}
		$('#up_cdesc').val(updesc);

		//修改模态框
		$('#updateModal').modal('show');
	
	}
	//删除类别,接受id,页码，当前页数据数据
	function del(cid,pageNum,num) {
		if (!confirm("确认要删除吗?")) {
			return;
		}
	
		alert(cid);
		$.ajax({
			url : 'categoryMsg/del.do',
			type : 'POST',
			async : "true",
			data : {
				"cid" : cid
			},
			dataType : 'json',
			success : function(data) {
				if (data.res > 0) {
					alert("删除成功");
					if(num=='1'||num==1){
						getCateory(pageNum-1);
					}else{
						getCateory(pageNum);
					}
					
				}else{
					alert("删除失败");
				}
			}
		});
	}
	
	
	<script src="jquery/jquery-2.2.4.min.js"></script>
	  var tds = $(obj).parent().parent().parent().parent().find('td');
	  var name=tds.eq(1).find('a').text();
	  var desc=tds.eq(2).text();
	  $("input[name='up_type']").val(name);
	  $("input[name='up_desc']").val(desc);
	
	
	
	
	var tid = tds.eq(0).find('input').eq(0).val();
    var tname = $("input[name='up_type']").val();
    var tdesc = $("input[name='up_desc']").val();
    if(tname == "" || tname == null|| tname == undefined){
    	alert("类别名不能为空！");
    	return;
    }

    $("input[name='up_type']").val("");
    $("input[name='up_desc']").val("");
</script>

</head>
<body>
	<section id="container">

		<!--header start-->
		<%@include file="header.jsp"%>
		<!--header end-->

		<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">

					<p class="centered">
						<a href="admin/adminmag.jsp"><img
							src="images/admin7.png" class="img-circle"
							width="60"></a>
					</p>
					<h5 class="centered">${admin.aname}</h5>

					<li class="mt"><a href="admin/index.jsp"> <i
							class="fa fa-bar-chart-o"></i> <span>销售统计</span>
					</a></li>

					<li class="sub-menu"><a class="active" href="javascript:;">
							<i class="fa fa-book"></i> <span>书籍</span>
					</a>
						<ul class="sub">
							<li><a href="admin/bookmag.jsp">书籍管理</a></li>
							<li class="active"><a href="admin/categorymag.jsp">类别管理</a></li>

						</ul></li>

					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-users"></i> <span>账户</span>
					</a>
						<ul class="sub">
							<li><a href="admin/usermag.jsp">用户管理</a></li>
							<li><a href="admin/adminmag.jsp">管理员管理</a></li>

						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-user"></i> <span>会员</span>
					</a>
						<ul class="sub">
							<li><a href="admin/membermag.jsp">会员折扣管理</a></li>

						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-shopping-cart"></i> <span>订单</span>
					</a>
						<ul class="sub">
							<li><a href="admin/ordermag.jsp">订单管理</a></li>
						</ul></li>

				</ul>
				<!-- sidebar menu end-->
			</div>
		</aside>
		<!--sidebar end-->
		<!-- **********************************************************************************************************************************************************
     以上是不变的内容--包括上边header和左边aside33###以下是变化的内容
      *********************************************************************************************************************************************************** -->

		<!--main content start-->
		<section id="main-content">
			<section class="wrapper">
				<h3>
					<i class="fa fa-angle-right"></i> 书籍类别管理
				</h3>
				<div class="row mt">
					<div class="col-lg-12">
						<div class="form-panel">
							<h5 class="mb">
								<i class="fa fa-angle-right"></i>操作
							</h5>
							<form class="form-inline" role="form" id="selform">
								<div class="form-group">
									<input type="search" name="q_cname" class="form-control"
										placeholder="请输入类别名">
								</div>
								<button type="button" class="btn btn-primary"
									onclick="getCateory(1)">查询</button>
						<button type="button" class="btn btn-success" onclick="dakai()">添加</button>
							</form>
							

						</div>
					</div>
				</div>
				<div class="row mt">
					<div class="col-md-12">
						<div class="content-panel">
							<table class="table table-striped table-advance table-hover">
								<!--   	  <h4><i class="fa fa-angle-right"></i> 书籍信息</h4>  -->
								<thead>
									<tr>
										<th><i class="fa fa-bullhorn"></i> 编号</th>
										<th><i class="fa fa-bullhorn"></i> 类别名</th>
										<th><i class="fa fa-bullhorn"></i> 类别描述</th>
										<th>管理</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>

						</div>

					</div>
				</div>
				<!-- <div class="row mt">
					<div class="col-lg-12">
						<div class="form-panel"> -->
							<!-- page start -->
							<div class="" id="mypage">
								<jsp:include flush="fasle" page="/jsutil/pagetool.jsp" />
							</div>
							<!-- page end -->
						<!-- </div>
					</div>
				</div> -->
			</section>
		</section>
		<!-- /MAIN CONTENT -->

		<!--main content end-->
		<!--footer start-->
		<%@include file="footer.jsp"%>
		<!--footer end-->
	</section>

	<!-- 添加模态框（Modal） -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">添加新类别</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="add_form">
						<div class="form-group">
							<label for="add_cname" class="col-sm-2 control-label">类别名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="add_cname"
									name="cname" placeholder="请输入类别名">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" name="cdesc"
									placeholder="请输入类别描述"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" class="btn btn-primary" onclick="add()">添加</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">类别信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="up_form">
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">ID</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="cid" id="up_cid"
									readonly placeholder="类别ID" /> <input type="hidden"
									id="up_page" placeholder="类别信息所属页码" />
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">类别名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="up_cname"
									name="cname" placeholder="请输入类别名">
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">类别描述</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="3" id="up_cdesc"
									name="cdesc" placeholder="请输入类别描述"></textarea>
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal"
						id="up_btn" onclick="update()">修改</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>


</body>
</html>